<template>
  <div>
    <div class="content_left_article" infinite-scroll-delay="2000" v-infinite-scroll="load" v-for="(item,i) in dataList" :key="i" :infinite-scroll-disabled="disabled">
        <div class="content_left_article_meta">
          {{item.username}}<div>|</div>{{item.last_edit_day}}天前
        </div>
        <div style="display:flex; justify-content: space-between; padding-bottom:12px; border-bottom:1px solid hsla(0,0%,59.2%,.1);">
          <div class="content_left_article_box">
            <div class="content_left_article_box_title"><a>{{item.title}}</a></div>
            <div class="content_left_article_box_overview"><a >{{item.content}}</a></div>
            <div class="content_left_article_box_icon">
              <i class="el-icon-aim">{{item.click}}</i>
              <i class="el-icon-thumb">{{item.like}}</i>
              <i class="el-icon-chat-dot-round">{{item.comment}}</i>
            </div>
          </div>
          <div ><img class="content_left_article_img" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9b40a55342e4dacbd6530b56ee4bb40~tplv-k3u1fbpfcp-no-mark:720:720:720:480.awebp?" alt=""></div>
        </div>
      </div>
      <p v-if="loading">Loading...</p>
    <p v-if="disabled">没有更多了</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios'
export default {
  name: 'Latest',
  setup() {
     let dataList=ref([]);
     let loading=ref(false);
    axios.get("http://101.35.142.191:8081/json/juejing.json").then(res=>{
        console.log(res.data);
        dataList.value = res.data
      })

    let disabled=ref(false)
    const load=()=>{
      loading.value=true;
      setTimeout(()=>{
        axios.get("http://101.35.142.191:8081/json/juejing.json").then(res=>{
        dataList.value.push(...res.data)
        if(dataList.value.length>30){
          disabled.value=true;
        }
        loading.value=false;
      })
      },2000)
    }
    return{
      load,dataList,disabled,loading
    }
  },
}
</script>

<style scoped lang="scss">
.content_left_article {
      overflow:auto;
      height: 133px;
      width: 100%;
      padding: 12px 20px 0 20px;
      &:hover {
        background-color: #f2f3f5;
        cursor: pointer;
      }
      &_meta {
        width: 100%;
        height: 22px;
        display: flex;
        line-height: 22px;
        font-size: 13px;
        div {
          margin: 0 15px;
        }
      }
      &_box {
        width:516px;
        height: 80px;

        &_title {
          width: 516px;
          height: 24px;
          margin:8px 0;
          a {
            color: #1d2129;
            font-weight: bolder;
          }
        }
        &_overview {
          font-size: 13px;
        }
        &_icon {
          display: flex;
          margin-top: 7px;
          i {
            margin-right: 10px;
            &:hover {
              color: blue;
            }
          }
        }
      }
      &_img {
        width: 120px;
        height: 80px;
      }
    }
</style>
